<template>
    <el-container>
        <el-header>
            <div class="left">
                <i class="el-icon-s-home"></i>
                课程管理系统
            </div>
            <div class="right">
                <el-row class="demo-avatar demo-basic">
                    <el-col :span="12">
                        <div class="demo-basic--circle">
                            <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
                        </div>
                    </el-col>
                </el-row>
                <el-dropdown @command="quits" trigger="click">
                    <span class="el-dropdown-link">
                        {{ $store.state.login.myname.username }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="quit">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <el-aside width="150px">
                <el-row class="tac">
                    <el-col :span="24">
                        <!-- 写router跳转，代替函数跳转，在点击项目内，绑定index--跳转路径  -->
                        <!-- router 全写为router:router   
                            :default-active='this.$route.path'绑定路由表
                            下面与跳转页面关联的点击模块，index中则是路由地址/xxx
                        -->
                        <el-menu router :default-active="this.$route.path" class="el-menu-vertical-demo"
                            @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff"
                            active-text-color="#ffd04b">
                            <el-menu-item :index="item.path" v-for="(item, index) in data" :key="index">
                                <i :class="item.icon"></i>
                                <span slot="title">{{ item.name }}</span>
                            </el-menu-item>
                            <!-- <el-menu-item index="/welcome">
                                <i class=" el-icon-s-data"></i>
                                <span slot="title">系统管理首页</span>
                            </el-menu-item>
                            <el-menu-item index="/system">
                                <i class="el-icon-s-platform"></i>
                                <span slot="title" id="10">系管理</span>
                            </el-menu-item>
                            <el-menu-item index="/major">
                                <i class="el-icon-place"></i>
                                <span slot="title">专业管理</span>
                            </el-menu-item>
                            <el-menu-item index="/class">
                                <i class="el-icon-discount"></i>
                                <span slot="title">班级管理</span>
                            </el-menu-item>
                            <el-menu-item index="/student">
                                <i class="el-icon-s-custom"></i>
                                <span slot="title">学生管理</span>
                            </el-menu-item>

                            <el-menu-item index="/teacher">
                                <i class="el-icon-s-check"></i>
                                <span slot="title">教师管理</span>
                            </el-menu-item>
                            <el-menu-item index="/lesson">
                                <i class="el-icon-s-flag"></i>
                                <span slot="title">课程管理</span>
                            </el-menu-item>
                            <el-menu-item index="/lesson-edit">
                                <i class="el-icon-edit"></i>
                                <span slot="title">选课修改</span>
                            </el-menu-item>
                            <el-menu-item index="/admin-edit">
                                <i class="el-icon-video-camera-solid"></i>
                                <span slot="title">管理员管理</span>
                            </el-menu-item> -->
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>

    </el-container>
</template>

<script>
import { quit } from "../api/user.js";

export default {
    data() {
        return {
            data: [],
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
            sizeList: ["large", "medium", "small"]
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        quits(c) {
            console.log(c);
            if (c == 'quit') {
                quit()
                this.$store.state.login.myname = {}
                this.$router.push('/')
            }
        },
        // 全局路由对象，从路由中调取列表数据
        getlist() {
            // console.log(this.$router.options.routes.filter(item => item.path == '/main')[0].children);
            this.data = this.$router.options.routes.filter(item => item.path == '/main')[0].children
            console.log(this.data, '全局左侧列表');

            // 获取用户权限(vuex)   
            // 需要在vuex中创建 meta{permission}
            // permission数据权限变量，后端接口里会写入权限数据
            // permission:'255'
            console.log(this.$store.state.login.myname.permission, 'main-permission');
            let permission = this.$store.state.login.myname.permission

            let group = []
            for (let bit = 0; bit < 8; bit++) {
                // 0100 0000
                // 0010 0000
                if (((1 << bit) & permission) === 1 << bit) {
                    group.push((1 << bit).toString());
                }
            }
            console.log(group);

            this.data = this.data.filter(item => group.indexOf(item.meta.permission) != -1 || !item.meta.permission)
            console.log(this.data);

        }
    },
    mounted() {
        this.getlist()
    }
}
</script>

<style scoped lang="scss">
.el-menu-item {
    text-align: left;
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.demo-avatar {
    margin-top: 20px;
    margin-right: 20px;
}

.el-container {
    height: 100% !important;
    width: 100% !important;
}

i {
    margin-right: 10px;
    color: #fff;
}

.el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    .right {
        display: flex;
        align-items: center;
    }
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    padding: 10px;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
</style>
